<template>
    <div class="asideDiv">
        <el-menu :default-active="activeName" class="el-menu-vertical-demo" active-color="#303133" :router="true"
            :unique-opened="true">
            <div class="leftTopLogo">探索</div>
            <!-- <el-sub-menu index="0">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>Ai短剧</span>
                </template>
                <el-menu-item index="asdfasd">11111</el-menu-item>
                <el-menu-item index="0-1">222</el-menu-item>
            </el-sub-menu> -->

            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <img class="menuIcon" :src="getPublic('aside/图片@2x.png')" alt="" srcset="">
                    </el-icon>
                    <span>Ai图片创作</span>
                </template>
                <el-menu-item index="image"
                    :class="(seleOneIndex.indexOf('image') != -1 || seleOneIndex == 'index') ? 'actItem' : ''">图片创作</el-menu-item>
                <el-menu-item index="batchCreate"
                    :class="seleOneIndex.indexOf('batchCreate') != -1 ? 'actItem' : ''">作品历史</el-menu-item>
            </el-sub-menu>


            <el-sub-menu index="2">
                <template #title>
                    <el-icon>
                        <img class="menuIcon" :src="getPublic('aside/用户@2x.png')" alt="" srcset="">
                    </el-icon>
                    <span>我的</span>
                </template>
                <el-menu-item index="account"
                    :class="seleOneIndex.indexOf('account') != -1 ? 'actItem' : ''">我的账户</el-menu-item>
                <!-- <el-menu-item index="works"
                    :class="seleOneIndex.indexOf('works') != -1 ? 'actItem' : ''">我的作品</el-menu-item> -->
            </el-sub-menu>


        </el-menu>

    </div>
</template>

<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ref, computed } from "vue";
import router from '../router';
import { selectKey } from 'element-plus';
import { getPublic } from "../request/getPublic"; //获取静态资源
const seleOneIndex = ref('0')
const activeName = computed(() => {
    seleOneIndex.value = String(router.currentRoute.value.name)
    console.log(seleOneIndex.value)
    return router.currentRoute.value.name
})

// const selectItem = (key: string, keyPath: string[]) => {
//     seleOneIndex.value = keyPath[0]
//     console.log('selectItem', key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//     console.log('handleClose', key, keyPath)
// }
</script>

<style scoped>
.menuIcon {
    width: 20px;
}

.asideDiv .el-menu-item.is-active,
.asideDiv .el-menu-item {
    color: rgba(0, 0, 0, 1);
}

.el-menu-vertical-demo {
    width: 100%;
    height: 100%;
}

.leftTopLogo {
    height: 60px;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 60px;
    color: rgba(0, 0, 0, 1);
    vertical-align: top;
}

.asideDiv {
    height: 100%;
    width: 100%;
    user-select: none;
}

.asideDiv .el-menu {
    border-right: 0px;
    background: rgba(251, 251, 251, 1);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}

.actItem {
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(244, 222, 77, 1) 0%, rgba(255, 195, 0, 1) 100%);
}
</style>
